<template>

    <!-- 注册、登录 -->
    <div class="login-login">
        <h2>Sign in to PODpartner</h2>

        <LoginAuthorized name="Sign in with Google" />

        <span class="login-or">Or</span>

        <form class="login-form" @submit.prevent="doLogin()">
            <label>
                <em v-text="error.email" v-if="error.email"></em>
                <input placeholder="Email" v-model="form.email" onkeyup="this.value=this.value.replace(/(\s*)/g,'')" @blur="checkData('email')" />
            </label>
            <label>
                <em v-text="error.password" v-if="error.password"></em>
                <input :maxlength="64" placeholder="Password" v-model="form.password" :type="suffix ?  'password' : 'text'" @blur="checkData('password')" />
                <i v-if="suffix" class="iconfont icon-dakaiyincang" @click.stop="suffix = false"></i>
                <i v-if="!suffix" class="iconfont icon-guanbiyincang" @click.stop="suffix = true"></i>
            </label>
            <button type="primary">
                <span>Sign in</span>
                <UxLoading :loading="loading" />
            </button>
        </form>

        <a class="link-forgot" @click="setTab('password')">Forgot password?</a>
        <button class="link-signup" type="text" @click="setTab('signup')">Sign up</button>

    </div>

</template>

<script>

import Md5 from "js-md5";
import RE from "@/utils/RE";
export default {
    props: {
        tab: { type: String, default: '' },
    },
    data () {
        return {
            loading: false,
            suffix: true,
            form: {
                email: '',
                password: '',
            },
            error: {
                email: '',
                password: '',
            }
        };
    },

    methods: {

        setTab (tab) {
            this.$emit('update:tab', tab)
        },

        //登录
        async doLogin () {
            if (this.loading) {
                // 登录中
                return;
            } else if (!this.checkData()) {
                // 验证不通过
            } else {
                // 登录
                const email = this.form.email.replace(/(^\s*)|(\s*$)/g, "")
                const password = this.form.password.replace(/(^\s*)|(\s*$)/g, "")
                const request = {
                    email: email,
                    password: Md5(password),
                    password_verify: Md5(password),
                };


                this.loading = true;
                const res = await this.$http("postUserLogin", request);

                if (res.code == 0) {
                    this.$store.dispatch("doLogin", res.data).then(res => {
                        this.$uxMessage.success("Login successful");
                        this.loading = false;
                    }).catch(err => {
                        this.$uxMessage.warning(err);
                        this.loading = false;
                    })
                } else if (res.code == 2) {
                    this.loading = false;
                    this.error.email = res.msg
                    this.$uxMessage.warning(res.msg);
                } else if (res.code == 6006) {
                    this.loading = false;
                    this.error.password = 'Incorrect password'
                    this.$uxMessage.warning(res.msg);
                } else {
                    this.loading = false;
                    this.$uxMessage.warning(res.msg);
                }
            }

        },

        checkData (name) {

            const check = {
                email: [
                    // 必须为长度必须1个以上
                    { reg: RE.not_empty, msg: 'Please enter a valid email address' },
                    // 格式要正确
                    { reg: RE.email, msg: 'Please enter a valid format' },
                ],
                password: [
                    // 必须为长度必须1个以上
                    { reg: RE.not_empty, msg: 'Please enter the correct password' },
                    // 至少6位，最大62位
                    { reg: RE.psw, msg: 'The password must be at least 6 characters' },
                ]
            }


            const keys = name ? [name] : Object.keys(this.form)
            const notify = []

            // 去首尾的空格
            keys.map(key => this.form[key] = (this.form[key] || '').replace(/^\s+|\s+$/gm, ''))
            keys.map(key => {
                const rule = check[key] || []
                const err = rule.find(item => !item.reg.test(this.form[key]))
                if (err) {
                    this.error[key] = err.msg;
                    notify.push(err)
                } else {
                    this.error[key] = '';
                }
            })
            return notify.length == 0
        },
    },
};
</script>

<style lang="scss" scoped>
.login-login {
    flex: 1;
    padding-right: 460px;
    padding-left: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 380px;
        right: 0;
        top: 0;
        background-color: #fafafa;
        background-repeat: no-repeat;
        background-size: 380px, 236px;
        background-image: url('https://img.podpartner.com/static/images-20230202/login-aside.png');
        background-position: center;
        border-radius: 0 10px 10px 0;
    }

    & > h2 {
        height: 28px;
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 28px;
    }

    .google-btn {
        margin-top: 18px;
    }

    .login-or {
        width: 100%;
        text-align: center;
        margin-top: 18px;
        margin-bottom: 18px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 16px;
    }

    .link-forgot {
        margin-top: 10px;
        width: 100%;
        white-space: nowrap;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 16px;
        cursor: pointer;
        text-decoration: underline;
    }

    .link-signup {
        margin-top: 32px;
        height: 20px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #ea4c89;
        line-height: 20px;
        align-self: flex-start;
        white-space: nowrap;
        border: none;
        padding: 0;
        color: #ea4c89;
        &:hover {
            color: #d5417a;
            text-decoration: underline;
        }
    }
}

.login-form {
    display: flex;
    flex-direction: column;
    & > label {
        position: relative;

        & + label {
            margin-top: 24px;
        }
        input {
            height: 42px;
            vertical-align: top;
        }
        em {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 2px;
            font-size: 12px;
            color: #f44336;
            line-height: 16px;

            & ~ input {
                border-color: #f44336;
            }
        }
        i {
            position: absolute;
            line-height: 20px;
            font-size: 20px;
            cursor: pointer;
            top: 50%;
            margin-top: -10px;
            right: 14px;
        }
    }

    & > button {
        margin-top: 48px;
        position: relative;
    }
}

@media (max-width: 960px) {
    .login-login {
        & > h2 {
            text-align: center;
        }
        padding: 52px 14px 0;
        &::before {
            display: none;
        }
    }
}
</style>
